<template>
    <div>
        <div class="header_box">
            <HeaderView>
                <template v-slot:center>
                   <div class="header_box_main">
                    团购活动
                   </div>  
                </template>
                
            </HeaderView>
        </div>
        
        <div class="box">
            <van-tabs v-model="active">
                <!-- 页面1 -->
                <van-tab title="进行中">
                    <div class="ingcard">
                        <van-card
                            num="2"
                            price="2.00"
                            desc="描述信息"
                            title="商品标题"
                            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                            >
                            <template #tags>
                                <van-tag plain type="danger">标签</van-tag>
                                <van-tag plain type="danger">标签</van-tag>
                            </template>
                            <template #footer>
                                <van-button size="mini">按钮</van-button>
                                <van-button size="mini">按钮</van-button>
                            </template>
                        </van-card>
                    </div>
                </van-tab>

                <!-- 页面2 -->
                <van-tab title="全部活动">
                    <div v-for="item in card" :key="item.id">
                        <div class="card">
                            <div class="cardHeader">
                                <span>NO.{{item.id}}</span>
                                <!-- 活动状态1:进行中2:未开始3:暂停4:结束5：审核中 6：审核失败-->
                                <!-- 1审核中 -->
                                <div class="state examine_state" v-if="item.acaStatus===5">
                                        <span>审核中</span>
                                        <van-icon name="manager-o" />
                                </div>
                                <!-- 2未开始 -->
                                <div class="state notstart_state" v-if="item.acaStatus===2">
                                    <span>未开始</span>
                                    <van-icon name="clock-o" />
                                </div>
                                <!-- 3已暂停 -->
                                <div class="state suspend_state" v-if="item.acaStatus===3">
                                        <span>已暂停</span>
                                        <van-icon name="play-circle-o" />
                                </div>
                                <!-- 4进行中 -->
                                <div class="state ing_state" v-if="item.acaStatus===1">
                                        <span>进行中</span>
                                        <van-icon name="passed" />
                                </div>
                                <!-- 5已结束 -->
                                <div class="state end_state" v-if="item.acaStatus===4">
                                        <span>已结束</span>
                                        <van-icon name="stop-circle-o" />
                                </div>
                                <!-- 6审核失败 -->
                                <div class="state fail_state" v-if="item.acaStatus===6">
                                        <span>审核失败</span>
                                        <van-icon name="warning-o" />
                                </div>
                            </div>
                            <div class="cardMain">
                                <div>
                                    <van-image
                                    width="2rem"
                                    height="2rem"
                                    fit="cover"
                                    src="https://cdn3.axureshop.com/demo/1525603/images/%E8%AF%84%E4%BB%B7%E7%BB%9F%E8%AE%A1/u3661.png"
                                    />
                                </div>
                                <div class="right">
                                    <p class="name">{{item.nameCh}}</p>
                                    <p class="note">截至{{item.fallData}}|周五|免预约</p>
                                    <span class="price">{{item.buyPrice}}</span>
                                    <span class="noneprice">{{item.totlePrice}}</span>
                                </div>
                            </div>
                        </div>
                        <!-- 活动状态1:进行中2:未开始3:暂停4:结束5：审核中 6：审核失败-->
                        <!-- 1审核中 -->
                        <div class="edit" v-if="item.acaStatus===5">
                            <p> </p>
                            <p @click="toEditGroupBuy">编辑团购</p>
                        </div>
                        <!-- 2未开始 -->
                        <div class="edit" v-if="item.acaStatus===2">
                            <p @click="toStopGroupBuy(item.id)">暂停优惠</p>
                            <p @click="toEditGroupBuy">编辑活动</p>
                        </div>
                        <!-- 3已暂停 -->
                        <div class="edit" v-if="item.acaStatus===3">
                            <p @click="toRegainGroupBuy(item.id)">恢复优惠</p>
                            <p @click="toDetailGroupBuy(item.id)" >查看详情</p>
                        </div>
                        <!-- 4进行中 -->
                        <div class="edit" v-if="item.acaStatus===1">
                            <p @click="toStopGroupBuy(item.id)">暂停优惠</p>
                            <p @click="toDetailGroupBuy(item.id)">查看详情</p>
                        </div>
                        <!-- 5已结束 -->
                        <div class="edit" v-if="item.acaStatus===4">
                            <p @click="toReUseGroupBuy(item.id)">继续发布</p>
                            <p @click="toDetailGroupBuy(item.id)">查看详情</p>
                        </div>
                        <!-- 6审核失败 -->
                        <div class="edit" v-if="item.acaStatus===6">
                            <p> </p>
                            <p @click="toEditGroupBuy">编辑活动</p>
                        </div>
                    </div>
                    <p>-没有更多数据了-</p>
                </van-tab>
            </van-tabs>

       <div class="footer">
            <span @click="tocreate">
                <van-icon name="plus"/>
                创建
            </span>
            <span @click="tooff">
                <van-icon name="exchange" />
                核销
            </span>
            <span @click="toorder">
                <van-icon name="description" />
                订单
            </span>
       </div>
        </div>
    </div>
</template>
<script>
    import {groupAxios} from '@/https/group'
    import HeaderView from '@/components/header1View.vue';
    import { Dialog } from 'vant';
    export default{
        data(){
            return{
                active: 1 ,      //头部标签页选择
                // activityNum:'3', //1.模拟，正在进行中的活动
                // card:[          //2.模拟，团购订单信息，数组
                //     {           
                //         id:120,     //序号
                //         state:'审核中',    //套单状态
                //         name:'烤肉单人套餐', //套餐名称
                //         note:'截至2021-02-20 | 周五 | 免预约', //套餐标注
                //         price:'$258',
                //         noneprice:'$373'
                //     },
                //     {           
                //         id:121,     //序号
                //         state:'已暂停',    //套单状态
                //         name:'烤肉单人套餐', //套餐名称
                //         note:'截至2021-02-20 | 周五 | 免预约', //套餐标注
                //         price:'$258',
                //         noneprice:'$373'
                //     },
                //     {           
                //         id:122,     //序号
                //         state:'未开始',    //套单状态
                //         name:'烤肉单人套餐', //套餐名称
                //         note:'截至2021-02-20 | 周五 | 免预约', //套餐标注
                //         price:'$258',
                //         noneprice:'$373'
                //     },
                //     {           
                //         id:123,     //序号
                //         state:'进行中',    //套单状态
                //         name:'烤肉单人套餐', //套餐名称
                //         note:'截至2021-02-20 | 周五 | 免预约', //套餐标注
                //         price:'$258',
                //         noneprice:'$373'
                //     },
                //     {           
                //         id:124,     //序号
                //         state:'已结束',    //套单状态
                //         name:'烤肉单人套餐', //套餐名称
                //         note:'截至2021-02-20 | 周五 | 免预约', //套餐标注
                //         price:'$258',
                //         noneprice:'$373'
                //     },
                //     {           
                //         id:125,     //序号  id
                //         state:'审核失败',    //套单状态 
                //         name:'烤肉单人套餐', //套餐名称  nameCh
                //         note:'截至2021-02-20 | 周五 | 免预约', //套餐标注 acData
                //         price:'$258', //buyPrice
                //         noneprice:'$373'  //totlePrice
                //     }
                // ],
                
                //后端渲染的数据
                activityNum:'',  //1.正在进行中的活动
                card:[]    
                
            }
        },
        created(){
            groupAxios(1,6)
            .then(
                res=>{
                    console.log(res.data)
                    this.activityNum=res.total;
                    this.card=res.data.data;
                }
            )
            .catch(
                err=>{
                    console.log(err)
                }
            )
        },
        methods:{
            tocreate(){
                this.$router.push('./CeateGroupBuy')
            },
            tooff(){
                this.$router.push('./OffOrder')
            },
            toorder(){
                this.$router.push('./AllOrder')
            },
            toEditGroupBuy(){
                this.$router.push('./EditGroupBuy')
            },
            toDetailGroupBuy(itemId){
                this.$router.push(
                    {
                        path:'./DetailGroupBuy',
                        query:{
                            id:itemId
                        }
                    }
                )
            },
            //<!-- 活动状态1:进行中2:未开始3:暂停4:结束5：审核中 6：审核失败-->
            toStopGroupBuy(id){   //暂停活动
                Dialog.confirm({
                    message: '是否暂停此活动id为'+id,
                    })
                    .then(() => {
                        // on confirm
                        for(var i=0;i<this.card.length;i++){
                            if(id==this.card[i].id){
                                this.card[i].acaStatus=3
                            }
                        }
                    })
                    .catch(() => {
                        // on cancel
                        
                    });
            },
            toRegainGroupBuy(id){  //恢复活动
                Dialog.confirm({
                    message: '是否暂停此活动id为'+id,
                    })
                    .then(() => {
                        // on confirm
                        for(var i=0;i<this.card.length;i++){
                            if(id==this.card[i].id){
                                this.card[i].acaStatus=1
                            }
                        }
                    })
                    .catch(() => {
                        // on cancel
                        
                    });
            },
            toReUseGroupBuy(id){     //继续发布
                Dialog.confirm({
                    message: '是否暂停此活动id为'+id,
                    })
                    .then(() => {
                        // on confirm
                        for(var i=0;i<this.card.length;i++){
                            if(id==this.card[i].id){
                                this.card[i].acaStatus=1
                            }
                        }
                    })
                    .catch(() => {
                        // on cancel
                        
                    });
            } 
        },
        components:{
            HeaderView
        }
    }
  
</script>
<style scoped>
    /* *{
        border:1px solid red;
    } */
    .header_box_main{
        width: 100px;
        text-align: center;
        margin:0 auto;
    }
    .header_box{
        height: 50px;
    }
    .box{
        background: #f5f5f5;
    }
    .ingcard{
        width: 80%;
        height: 120px;
        margin:10px auto 0 auto;
        background: white;
        border-radius: 20px;
        padding: 20px;
    }
    .card{
        width: 80%;
        height: 120px;
        margin:10px auto 0 auto;
        background: white;
        border-radius: 20px;
        padding: 20px;
    }
    .cardHeader{
        display: flex;
        justify-content: space-between;
        font-size: 16px;
    }
    .state{
        width: 100px;
        height: 20px;  
        border-radius: 10px;
        text-align: center;
    }
    .examine_state{
        background: #fb8974; 
    }
    .notstart_state{
        background: #52beed;
    }
    .suspend_state{
        background: #999999;
    }
    .ing_state{
        background: #0066cc;
    }
    .end_state{
        background:#cccccc;
    }
    .fail_state{
        background:#ff0000;
    }

    .cardMain{
        display: flex;
        margin-top: 10px;
    }
    .right{
        margin-left: 20px;
    }
    .name{
        font-size: 16px;
        font-weight: 800;
        padding:0;
        margin:0;
    }
    .note{
        font-size: 12px;
        padding:0;
        margin:3px;
    }
    .price{
        font-size: 15px;
        color: red;
    }
    .noneprice{
        font-size: 15px;
        text-decoration:line-through;
        margin-left:10px;
    }
    .edit{
        width: 80%;
        height: 10px;
        margin:1px auto;
        background: white;
        border-radius: 10px;
        padding: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content:space-between;
    }
    .footer{
        width: 100%;
        height: 50px;
        background: white;
        position: fixed;
        bottom: 0;
        left: 0;
        font-size: 18px;
        display: flex;
        justify-content: space-evenly;
        
    }
    .van-icon-description:before {
        content: '\e6a3';
        color:#0066cc;
    }
    .van-icon-exchange:before {
        content: '\e6af';
        color:#0066cc;
    }
    .van-icon-plus:before {
        content: '\e6fa';
        color:#0066cc;
    }

</style>